<template>
	<view :style="theme">
		<view style="height: 20rpx;"></view>
		<view class="head">
			<view class="flex flex_between">
				<view class="venueName f26 c2">
					<image :src="imgHost+'/ic_changguan.png'" mode="widthFix"></image>
					{{info.venueName}}
				</view>
				<view class="ztColor f26">待签到</view>
			</view>
			<view class="name">{{item.courseName}}</view>
			<view class="tip">请出示二维码消课</view>
			<view class="code_box_code">
				<canvas canvas-id="qrcode" style="width: 220px;height: 220px;margin: 0 auto;" />
			</view>
			<view class="code">{{info.code || ''}}</view>
		</view>
		<view class="bt">
			课程信息
		</view>
		<view class="xxkc" @click="jump2('/pages/curriculum/detail?id=', info.courseId)">
			<view class="tabHead flex flex_between on">
				<view class="left flex"><u-icon name="clock" color="var(--color)" size="28rpx"></u-icon><text>{{info.day + ' '}} {{info.time || ''}}</text></view>
				<view class="right">
					未开始
				</view>
			</view>
			<view class="flex flex_between cont">
				<image class="left" :src="info.courseImage"></image>
				<view class="right">
					<view class="name">{{info.courseName}}</view>
					<view v-if="info.site" class="dd">{{info.site}}</view>
					<view class="jl">{{info.teacher}}{{info.teacherLevelName?' ｜ ' + info.teacherLevelName : ''}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				info: {},
				url: ''
			}
		},
		onLoad(ops) {
			let info = JSON.parse(ops.info)
			this.info = info
			this.qrFun(info.code)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			qrFun: function(text) {
				this.qrShow = true
				uni.showLoading({
					title: '加载中...'
				})
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 220,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.head {
		padding: 30rpx;
		margin: 0 auto;
		width: 690rpx;
		box-sizing: border-box;
		background-color: #fff;
		line-height: 1;
		.venueName {
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
		.name {
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-top: 30rpx;
		}
		.tip {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
		}
		.code_box_code {
			display: flex;
			justify-content: center;
			margin: 40rpx auto 20rpx;
		}
		.code {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			text-align: center;
		}
	}
	.bt {
		width: 690rpx;
		margin: 40rpx auto 0;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
	}
	.xxkc {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 30rpx 24rpx;
		overflow: hidden;
		margin: 24rpx auto;
		position: relative;
		box-sizing: border-box;
		.tabHead {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 20rpx;
			line-height: 40rpx;
			&.on {
				color: $color;
			}
			.left {
				text {
					margin-left: 6rpx;
				}
			}
		}
		.cont {
			
			.left {
				width: 212rpx;
				height: 120rpx;
				border-radius: 8rpx;
				flex: none;
				margin-right: 24rpx;
			}
			.right {
				flex: 1;
				.name {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 42rpx;
				}
				.dd {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 8rpx;
				}
				.jl {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}
			
		}
		.yicon {
			position: absolute;
			box-sizing: border-box;
			padding: 12rpx;
			background-color: $color;
			bottom: 0;
			right: 0;
			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: top;
			}
		}
		
	}
	
</style>